<!-- 用户管理js脚本 -->
<!-- 用户 -->
<script setup lang="ts">
import http from "@/http";
import {
    Delete,
    Edit,
    Search,
    Share,
    Upload,
    CirclePlus,
} from "@element-plus/icons-vue"; //导入图标
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { onMounted, ref } from "vue";
import { ElMessageBox } from 'element-plus'
import { useCookies } from 'vue3-cookies'
import { ElTable } from 'element-plus'
import { Check, Close } from '@element-plus/icons-vue'
const { cookies } = useCookies();
//从cookies中获取token
const token = cookies.get('token')
//用户对象
let user = ref({
    username: '',
    password: '',
    status: '1',
    photoPath: '',

})
//控制单选框
const radio1 = ref('1')
const isIndeterminate = ref(true)
// 父菜单
let checkedCities2 = ref({})
let checkedCities = ref(['Shanghai', 'Beijing'])
// 子菜单
let cities2 = ref({})
let cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']

const handleCheckAllChange = (val: boolean) => {
    checkedCities.value = val ? cities : []
    isIndeterminate.value = false
}

//控制抽屉打开
const drawer = ref(false)
const innerDrawer = ref(false)
//抽屉
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('You still have unsaved data, proceed?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
// 接收用户传图片name
const imageUrl = ref('')
//分页总页数
let pagepages = ref()
import type { TableInstance } from 'element-plus'
import { id, it } from "element-plus/es/locale";
// 用户上传图片开始
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,//响应回来的数据
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    //给用户对象的头像属性赋值
    users.value.picture = response  
}
//上传文件2
const handleAvatarSuccess2: UploadProps['onSuccess'] = (
    response,//响应回来的数据
    uploadFile
) => {
    imageUr2.value = URL.createObjectURL(uploadFile.raw!)
    //给imageUrl3赋值
    imageUr3.value = response;
    //给用户对象的头像属性赋值
    users.value.picture = response
}
// 上传之前调用，验证文件格式和大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type != 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
        ElMessage.error('图片格式不对或文件损坏!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件大小不能超过 2MB!')
        return false
    }
    return true
}
// 用户上传图片结束
//控制模态框开关属性
const dialogVisible = ref(false)
//用户搜索框值
const uname = ref("");
//输入框清空
const input = ref("");
interface User {
    deptId: number
    regNumber: string
    deptName: string
    orderNum: string
}
//表格的元素引用
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref([])
//全选和全不选
const toggleSelection = (rows?, ignoreSelectable?: boolean) => {
    if (rows) {
        rows.forEach((row) => {
            multipleTableRef.value!.toggleRowSelection(
                row,
                undefined,
                ignoreSelectable
            )
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
//获取选中的用户
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
//用户信息
const tableData = ref([])
//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(2)
//定义总条数
let tatole = ref(0)
// 排班
let schedulingFlag = ref()
const data1 = true//需要
const data2 = false//不需要
//根据用户名获取当前页用户信息
function getPage() {
    http.get("/user/getUsers", {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            uname: uname.value
        }
    }).then((res) => {
        console.log(res)
        //存储获取到的当前页数据
        tableData.value = res.list
        pagepages.value = res.pages
        tatole.value = res.total
        schedulingFlag.value = res.schedulingFlag
        console.log(tableData.value)
    })
}
//挂载完成时调用查询所有用户的方法
onMounted(() => {
    getPage();
})
import { ElButton, ElDrawer } from 'element-plus'//抽屉
import { CircleCloseFilled } from '@element-plus/icons-vue'
//控制抽屉开关
const visible = ref(false)
//定义一个修改对象
let NewSetUser = ref({
    id: '',
    userName: '',
    password: '',
    status: '',
    picture: '',
})
let imageUr3 = ref('')
//修改
const handleEdit = (index: number, row) => {
    imageUr2.value = '';
    //给修改对象赋值
    //NewSetUser.value=row
    NewSetUser.value.id = row.userId
    NewSetUser.value.userName = row.userName
    NewSetUser.value.password = row.password
    NewSetUser.value.status = row.status
    NewSetUser.value.picture = row.picture
    imageUr2.value = row.picture
    imageUr3.value = row.picture
    //修改模态框显示
    visible.value = true
}
//删除
const handleDelete = (index: number, row) => {
    ElMessageBox.confirm(
        `你是否删除编号为 ${row.userId} 的用户?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.get("/user/deteleUser?id=" + row.userId).then((res) => {
                if (res > 0) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getPage()
                } else {
                    ElMessage.error('删除失败')
                }
            })
        })
}
//修改用户状态
function setStatus(userId, status) {
    //发送异步请求修改用户状态
    http.post("/user/setStatus", { id: userId, status: status })
        .then((res) => {
            getPage();
            console.log("成功" + res)
        })
        .catch((res) => {
            console.log(res)
        })
}
// 模糊查询按钮
function selectLike() {
    //调用查询所有方法
    getPage();
}
// 分页：当前页页号发生改变
const handleCurrentChange = (val: number) => {
    //修改当前页的页号
    pageNum.value = val
    //重新获取当前页的数据
    getPage();
    console.log(`current page: ${val}`)
}
//
import { ElNotification } from 'element-plus'//导入消息提示
import { h } from 'vue'
import { Value } from "sass-embedded";
import { RefSymbol } from "@vue/reactivity";
const open1 = () => {
    ElNotification({
        title: 'Title',
        message: h('i', { style: 'color: teal' }, 'This is a reminder'),
    })
}
let imageUr2 = ref();
// 添加用户的对象
let users = ref({
    // 姓名，手机号，所属科室，级别，年龄，学历，性别，状态，是否排班
    userId: '',
    deptId: '',
    userName: '',
    userType: '',
    sex: '', //0男 1女 2未知
    age: '',
    picture: '',
    background: '',// 学历 sys_dict_type:sys_user_background
    phone: '',
    email: '',
    strong: '',
    honor: '',
    introduction: '',
    userRank: '',//医生级别sys_dict_type:sys_user_level
    password: '',
    lastLoginTime: '',
    lastLoginIp: '',
    status: '',//帐号状态（0正常 1停用）
    unionId: '',
    openId: '',
    createTime: '',
    updateTime: '',
    createBy: '',
    updateBy: '',
    salt: '',
    delFlag: '', //删除标志（0正常 1删除）
    schedulingFlag: '',//排班0需要,1 不需要
})
let deptNames = ref([])
let userRanks = ref([])
let backgrounds = ref([])
let userx = ref([])
let userx1 = ref([])
let userx2 = ref([])
function userDK() {
    //部门名称 deptName.value  级别 userRanks.value  用户学历  backgrounds.value
    //获取下拉框数据
    http.get("/user/getSysDctData")
        .then((res) => {
            console.log(res)
            if (res != null) {
                // 部门
                userx.value = res[0]
                deptNames.value = res[0].map(item => ({
                    label: item.deptName,
                    value: item.deptId
                    }));
                userx1.value = res[1]
                //学历
                backgrounds.value = res[1].map(item => ({
                    label: item.dictLabel,
                    value: item.dictSort
                    }));
                userx2.value = res[2]
                //级别
                  userRanks.value = res[2].map(item => ({
                    label: item.dictLabel,
                    value: item.dictSort
                    }));
                console.log(deptNames.value)
                console.log(backgrounds.value)
                console.log(userRanks.value)
                dialogVisible.value = true
            }
        })
        .catch((res) => {
            console.log(res)
        })
}
//添加用户确定按钮
function addUser() {
    //发送异步请求post的添加用户的请求
    console.log(users.value)
    http.post("/user/adduser", users.value) 
        .then((res) => {
            if (res) {
                //调出成功的提示框
                open1();
                //清空添加表单数据
                users= ref({
                    // 姓名，手机号，所属科室，级别，年龄，学历，性别，状态，是否排班
                    userId: '',
                    deptId: '',
                    userName: '',
                    userType: '',
                    sex: '', //0男 1女 2未知
                    age: '',
                    picture: '',
                    background: '',// 学历 sys_dict_type:sys_user_background
                    phone: '',
                    email: '',
                    strong: '',
                    honor: '',
                    introduction: '',
                    userRank: '',//医生级别sys_dict_type:sys_user_level
                    password: '',
                    lastLoginTime: '',
                    lastLoginIp: '',
                    status: '',//帐号状态（0正常 1停用）
                    unionId: '',
                    openId: '',
                    createTime: '',
                    updateTime: '',
                    createBy: '',
                    updateBy: '',
                    salt: '',
                    delFlag: '', //删除标志（0正常 1删除）
                    schedulingFlag: '',//排班0需要,1 不需要
                })
                imageUrl.value = ''
                //关闭对话框
                dialogVisible.value = false
                //重新获取当前页的数据
                getPage();
            }
            console.log(res)
        })
}
//修改用户信息不能为空提示框
const open3 = () => {
    ElMessage({
        message: '用户信息不能为空',
        type: 'warning',
    })
}
//  修改按钮
function setUser() {
    //判断数据是否合理
    if (NewSetUser.value.userName == '' || NewSetUser.value.password == '') {
        //弹出不能为空提示框
        open3();
        return;
    }
    //定义一个修改对象
    let NewSetUser2 = ref({
        userId: NewSetUser.value.id,
        userName: NewSetUser.value.userName,
        password: NewSetUser.value.password,
        status: NewSetUser.value.status,
        picture: NewSetUser.value.picture,
    })
    //发送异步请求，修改用户信息
    NewSetUser2.value.picture = imageUr3.value;
    console.log("修改对象1" + NewSetUser2.value)
    http.post("/user/setUserBYId", NewSetUser2.value)
        .then(() => {
            console.log("修改对象" + NewSetUser.value)
            visible.value = false
            //调用查询所有用户信息的方法
            getPage();
        })
}
//存储选中的角色编号的数组
const checkList = ref([1])
//所有角色数据
let roleDate = ref([])
//用户id
let uid = ref()
//授权点击事件
const getMenus = async (index: number, row) => {
    //获取用户编号
    uid.value = row.userId
    //查询所有角色
    await http.get("/role/getRoles").then((res) => {
        roleDate.value = res
        console.log(checkedCities2.value)

    })
    //查询用户拥有的角色编号
    await http.get('/role/getUserRids?uid=' + uid.value).then((res) => {
        //获取用护编号
        checkList.value = res
    })

    console.log("成功")
    //打开抽屉
    drawer.value = true
}
//成功提示
const open10 = () => {
    ElMessage({
        message: '授权成功',
        type: 'success',
    })
}
// 点击确定添加用户的角色
function addUserRole() {
    //判断是否为空
    console.log(checkList.value)
    //发送异步请求添加
    http.get("/user/addUserRole", { params: { uid: uid.value, rids: checkList.value.toString() } }).then((res) => {
        console.log("成功", res)
        open10();
        getPage();
    }).catch((res) => {
        console.log("失败", res)
    })
}
// 修改 排班
const setSchedulingFlag = (userId, schedulingFlag) => {
    http.post("/user/setschedulingFlag", { id: userId, schedulingFlag: schedulingFlag })
        .then((res) => {
            if (res > 0) {
                getPage()
                ElMessage({
                    type: 'success',
                    message: '修改成功',
                })
            } else {
                ElMessage.error('修改失败')
            }
        })
}

// //修改用户状态
// function setStatus(userId, status) {
//   //发送异步请求修改用户状态
//   http.post("/user/setStatus", { id: userId, status: status })
//     .then((res) => {
//         getPage();
//       console.log("成功" + res)
//     })
//     .catch((res) => {
//       console.log(res)
//     })
// }
const handleChange = (value: number | undefined) => {
    console.log(value)
}
// let num = ref(0)
</script>
<!-- 主体内容 -->
<template>
    <!-- 头部搜索 -->
    <el-row>
        <el-col :span="24">
            <!-- 批量删除 -->
            <el-button type="danger" :icon="Delete">Danger</el-button>
            <!-- 添加用户 -->
            <el-button type="success" :icon="CirclePlus" @click="userDK">添加用户</el-button>
            <el-input v-model="uname" style="width: 240px" placeholder="请输入用户名" clearable />
            <!-- 搜索按钮 -->
            <el-button type="primary" :icon="Search" class="linkText" @click="selectLike">搜索</el-button>
        </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" border stripe ref="multipleTableRef" row-key="userId"
        @selection-change="handleSelectionChange">
        <!-- 复选框列 -->
        <el-table-column type="selection" width="55" />
        <!-- 普通列表 -->
        <el-table-column label="编号" width="80" prop="userId">
            <template #default="scope">{{ scope.row.userId }}</template>
        </el-table-column>
        <el-table-column property="name" label="用户名" width="120" prop="userName" />
        <!-- 普通列表 -->
        <el-table-column label="部门" width="100" prop="deptId" />
        <el-table-column label="手机号码【登录身份】" width="180" prop="phone" />
        <el-table-column label="性别" width="60" prop="sex">
            <template #default="scope">{{ scope.row.sex == 0 ? "男" : "女" }}</template>
        </el-table-column>
        <el-table-column label="年龄" width="80" prop="age" />
        <!-- 是否排班 -->
        <el-table-column label="是否排班" width="100" prop="schedulingFlag">
            <template #default="scope">
                {{ schedulingFlag=scope.row.schedulingFlag == 0 ? data1 : data2 }}
                <el-switch v-model="schedulingFlag"
                    @click="setSchedulingFlag(scope.row.userId, scope.row.schedulingFlag)" class="mt-2"
                    style="margin-left: 10px" inline-prompt :active-icon="Check" :inactive-icon="Close" />
            </template>
        </el-table-column>
        <el-table-column property="status" label="状态" width="140px">
            <template #default="scope">
                <!-- 滑动单选框容器 -->
                <!-- 滑动单选框容器 -->
                <div class="custom-switch" @click="setStatus(scope.row.userId, scope.row.status)">
                    <!-- 滑动轨道 -->
                    <div class="switch-track" :class="{ 'active': scope.row.status != 1 }">
                        <!-- 滑动按钮 -->
                        <div class="switch-thumb" :class="{ 'active': scope.row.status != 1 }"></div>
                    </div>
                    <!-- 可选：状态文本 -->
                    <span class="state-text">{{ scope.row.status != 1 ? '可用' : '禁用' }}</span>
                </div>
            </template>
        </el-table-column>
        <!-- 自定义列表展示图片 -->
        <el-table-column property="name" label="头像" width="120" prop="picture">
            <template #default="scope">
                <img :src="scope.row.picture" height="80px" width="68px">
            </template>
        </el-table-column>
        <!--自定义列表 -->
        <el-table-column label="角色" width="120">
            <template #default="scope">
                <span v-for="role in scope.row.roleList">
                    {{ role.roleName }}
                </span>
            </template>
        </el-table-column>
        <!-- 自定义列 -->,.
        <el-table-column label="操作" width="300">
            <template #default="scope">
                <!-- getMenus -->
                <!-- drawer = true -->
                <el-button type="success" @click="getMenus(scope.$index, scope.row)">
                    <el-icon>
                        <Stamp />
                    </el-icon>授权
                </el-button>

                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    <el-icon>
                        <EditPen />
                    </el-icon> 修改
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
        <!-- 自定义列结束 -->
    </el-table>
    <!-- 添加模态框 -->
    <el-dialog v-model="dialogVisible" width="650px" modal-class="overide-animation" :before-close="(doneFn) => {
        console.log('before-close'), doneFn()
    }
        " @open="console.log('open')" @open-auto-focus="console.log('open-auto-focus')" @opened="console.log('opened')"
        @close="console.log('close')" @close-auto-focus="console.log('close-auto-focus')"
        @closed="console.log('closed')">
        <!-- 添加用户区域 -->
        <h1>添加用户</h1>
        用户名:<input type="" style="font-size: 100%;width: 35%;" v-model="users.userName">
        手机号： <el-input v-model="users.phone" style="width: 240px" maxlength="11" placeholder="请输入电话号码" show-word-limit
            type="text" />
        <br> <br>
        密码：<el-input v-model="users.password" style="width: 240px" type="password" placeholder="请设置密码" show-password />
        <br><br>
        所属科室：<el-select v-model="users.deptId" clearable placeholder="选择科室" style="width: 35%">
            <el-option v-for="item in deptNames" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        级别：<el-select v-model="users.userRank" clearable placeholder="选择级别" style="width: 35%">
            <el-option v-for="item in userRanks" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <br><br>
        <el-row>
            <el-col :span="24">
                年龄：<el-input-number v-model="users.age" :min="1" :max="100" @change="handleChange" />
                学历：<el-select v-model="users.background" clearable placeholder="选择学历" style="width: 20%">
                    <el-option v-for="item in backgrounds" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                是否排班：<el-radio-group v-model="users.schedulingFlag">
                    <el-radio value="0" size="large" border>需要</el-radio>
                    <el-radio value="1" size="large" border>不需要</el-radio>
                </el-radio-group>
            </el-col>
        </el-row>
        性别：<el-radio-group v-model="users.sex">
            <el-radio value="0" size="large" border>男</el-radio>
            <el-radio value="1" size="large" border>女</el-radio>
            <el-radio value="2" size="large" border>未知</el-radio>
        </el-radio-group>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 单选框组开始 -->
        状态：<el-radio-group v-model="users.status">
            <el-radio value="1" size="large" border>启动</el-radio>
            <el-radio value="0" size="large" border>禁用</el-radio>
        </el-radio-group>
        <!-- 单选框组结束 -->
        <br>
        <br>
        添加图片
        <el-upload class="avatar-uploader" action="http://localhost:8080/user/uploadImg" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="{ token: token }">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
        <br>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="addUser">
                    添加用户
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 分页div -->
    <div>
        <el-row type="flex" justify="center"><el-col :span="12" :offset="6">
                <el-pagination v-model:current-page="currentPage1" :page-size="pageSize" background
                    layout="total, prev, pager, next" :total="tatole" @current-change="handleCurrentChange" />
            </el-col></el-row>

    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="给用户分配角色" size="50%">
        <!-- 复选框组 -->
        <el-checkbox-group v-model="checkList">
            <el-checkbox :value="role.roleId" v-for="role in roleDate" :label="role.roleName" :key="role.roleId"
                style="display: block;margin: 10px;" />
            <div>
                <el-form-item>
                    <el-button type="primary" @click="addUserRole">确定</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </div>
        </el-checkbox-group>

        <!-- <div>
      <el-button @click="innerDrawer = true">Click me!</el-button>
      <el-drawer
        v-model="innerDrawer"
        title="I'm inner Drawer"
        :append-to-body="true"
        :before-close="handleClose"
      >
        <p>_(:зゝ∠)_</p>
      </el-drawer>
    </div> -->
    </el-drawer>
    <!-- 修改模态框抽屉 -->
    <el-drawer v-model="visible" :show-close="false">
        <el-form :model="NewSetUser">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">修改用户</h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                    </el-icon>
                    关闭
                </el-button>
            </template>
            <br>
            用户名:<input type="" style="font-size: 100%;width: 50%;" v-model="NewSetUser.userName" required>
            <br>
            <br>
            密码：&nbsp;<input type="" v-model="NewSetUser.password" style="width: 50%;" required>
            <br>
            <br>
            <!-- 单选框组开始 -->
            <div style="margin-left: 40px;">
                <el-radio-group v-model="NewSetUser.status">
                    <el-radio value="0" size="large" border>启动</el-radio>
                    <el-radio value="1" size="large" border>禁用</el-radio>
                </el-radio-group>
            </div>
            <!-- 单选框组结束 -->
            <br>
            <br>
            更换图片
            <el-upload class="avatar-uploader" action="http://localhost:9999/user/uploadImg" :show-file-list="false"
                :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
                <img v-if="imageUr2" :src=imageUr2 class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            <br>
            <div class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="primary" @click="setUser">
                    修改
                </el-button>
            </div>
            <br>
        </el-form>
    </el-drawer>
</template>

<!-- 样式 -->
<style scoped>
.divMarginTop {
    margin-top: 10px;
}

/* 表格样式 */
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.div2 {
    margin-top: 100px;
    margin-bottom: 30px;
}

.linkText {
    margin-left: 5px;
}

/* 分页页码样式 */
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}

/* <!-- 上传用户头像样式 --> */
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<!-- 上传用户头像样式 -->
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

/* 滑动轨道 */
.switch-track {
    width: 60px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 15px;
    position: relative;
    transition: background-color 0.3s ease;
}

/* 激活状态的轨道颜色 */
.switch-track.active {
    background-color: #4CAF50;
    /* 可自定义激活颜色 */
}

/* 滑动按钮 */
.switch-thumb {
    width: 26px;
    height: 26px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 激活状态的按钮位置 */
.switch-thumb.active {
    transform: translateX(30px);
    /* 根据轨道宽度调整 */
}

/* 状态文本样式 */
.state-text {
    font-size: 14px;
    color: #666;
    font-weight: bold;
}

/* Add your styles here */
.dialog-footer {
    text-align: right;
}

/* 修改模态框 */
.form-container {
    padding: 20px;
    max-width: 600px;
}

.el-input-number {
    width: 100%;
}

.el-radio-group {
    margin-top: 5px;
}

/* 容器样式 */
.custom-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
</style>